<template>
    <div class="page">
        <div class="header">
            <a href="javascript:history.go(-1)" class="go_left"></a>
            <span class="header_til">贷款</span>
        </div>
        <div class="money-box">
            <div class="money-item" @click="loanTimeTap">
                <div style="display: flex;align-items: center;margin: auto;">
                    <img class="item-img" src="./img/loan_icon1.png"/>
                    <div class="money-txt">期限</div>
                    <img class="icon-btselect" src="./img/icon_btselect.png"/>
                </div>
            </div>
            <div class="money-item" @click="loanLimitTap">
                <div style="display: flex;align-items: center;margin: auto;">
                    <img class="item-img" src="./img/loan_icon3.png"/>
                    <div class="money-txt">金额</div>
                    <img class="icon-btselect" src="./img/icon_btselect.png"/>
                </div>
            </div>
            <div class="money-item" @click="loanTypeTap">
                <div style="display: flex;align-items: center;margin: auto;">
                    <img class="item-img" src="./img/loan_icon5.png"/>
                    <div class="money-txt">类型</div>
                    <img class="icon-btselect" src="./img/icon_btselect.png"/>
                </div>
            </div>
        </div>
        <div class="sign-ui">
            <ScrollPull @onDown="onDown">
                <div
                        style="border-bottom: 1px #e5e5e5 solid;"
                        v-for="(item, index) in organList"
                        :key="index"
                        @click="goDetails(item.id)"
                >
                    <div class="loan-list">
                        <div class="loan-info">
                            <img :src="getImgUrl(item.logo)" style="width: 58px;height: 58px;"/>
                            <div class="organ-info">
                                <div class="organ-name">{{ item.name }}</div>
                                <div class="organ-service">{{ item.keyword }}</div>
                                <div class="organ-peopleCount">
                  <span>{{ item.applyNumber }}</span
                  >人申请
                                </div>
                            </div>
                        </div>
                        <div class="apply-btn">申请</div>
                    </div>
                    <div class="moneyItem-box">
                        <div class="money-item">
                            <div class="money-txt">额度(元)</div>
                            <div class="money-conter">{{item.loanLimit}}</div>
                        </div>
                        <div class="money-item">
                            <div class="money-txt">借款期限</div>
                            <div class="money-conter">{{item.loanTime}}</div>
                        </div>
                        <div class="money-item">
                            <div class="money-txt">日费率</div>
                            <div class="money-conter">{{item.dayPer}}</div>
                        </div>
                    </div>
                </div>
            </ScrollPull>
        </div>
        <div class="accordion-box" v-if="dateDisp">
            <div class="center-box">
                <div class="date-item" v-for="(item, index) in dateList" :key="index" @click.stop="dateFindTap(item.id)">
                    {{ item.txt }}
                </div>
            </div>
        </div>
        <div class="accordion-box" v-if="typeDisp">
            <div class="type-title">我有</div>
            <div class="center-box">
                <div class="type-item" v-for="(item, index) in typeList" :key="index" @click.stop="typeFindTap(item.id)">
                    {{ item.txt }}
                </div>
            </div>
            <div class="btn-box">
                <div class="btn-item">重置</div>
                <div class="btn-item" style="background-color: #5461eb;color: #fff">
                    确认
                </div>
            </div>
        </div>
        <div class="accordion-box" v-if="moneyDisp">
            <div class="center-box">
                <div class="date-item" v-for="(item, index) in moneyList" :key="index" @click.stop="moneyFindTap(item.id)">
                    {{ item.txt }}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import ScrollPull from "../../components/Scroll/scrollPull";
    import {getGoodsList} from "../../api/home"
    export default {
        components: {
            ScrollPull
        },
        data() {
            return {
                page: 1,
                limit: 10,
                dateDisp: false,
                typeDisp: false,
                moneyDisp: false,
                dateList: [
                    {
                        txt: "2周",
                        id: 1
                    },
                    {
                        txt: "6个月内",
                        id: 1
                    },
                    {
                        txt: "1个月内",
                        id: 1
                    },
                    {
                        txt: "1年内",
                        id: 1
                    },
                    {
                        txt: "1-3年内",
                        id: 1
                    },
                    {
                        txt: "3年以上",
                        id: 1
                    },
                    {
                        txt: "周期不限",
                        id: 1
                    }
                ],
                moneyList: [
                    {
                        txt: "1000-5000",
                        id: 1
                    },
                    {
                        txt: "1000-10000",
                        id: 1
                    },
                    {
                        txt: "1000-30000",
                        id: 1
                    },
                    {
                        txt: "5000-50000",
                        id: 1
                    },
                    {
                        txt: "100-500",
                        id: 1
                    }
                ],
                typeList: [
                    {
                        txt: "全部",
                        id: 1
                    },
                    {
                        txt: "不查征信",
                        id: 1
                    },
                    {
                        txt: "身份证贷",
                        id: 1
                    },
                    {
                        txt: "信用卡贷",
                        id: 1
                    },
                    {
                        txt: "芝麻分贷",
                        id: 1
                    },
                    {
                        txt: "手机号贷",
                        id: 1
                    },
                    {
                        txt: "公积金贷",
                        id: 1
                    },
                    {
                        txt: "大额贷",
                        id: 1
                    },
                    {
                        txt: "抵押贷",
                        id: 1
                    },
                    {
                        txt: "全部类型",
                        id: 1
                    }
                ],
                organList: [
                ],
            };
        },
        created() {
          this.onDown()
        },
    methods: {
        getImgUrl(url) {
            return process.env.VUE_APP_IMAGE_DOMAIN + url
        },
        onDown: function () {
            getGoodsList(this.page,this.limit).then(res=> {
                if (res.data.length > 0) {
                    this.organList = this.organList.concat(res.data)
                    this.page++
                }
            })
        },
        goDetails: function(id) {
            this.$router.push({
                path: "/details",
                query: {
                    id: id
                }
            })
        },
        loanTimeTap: function () {
            this.dateDisp = !this.dateDisp
            this.moneyDisp = false
            this.typeDisp = false
        },
        loanLimitTap: function () {
            this.moneyDisp = !this.moneyDisp
            this.dateDisp = false
            this.typeDisp = false
        },
        loanTypeTap: function () {
            this.typeDisp = !this.typeDisp
            this.moneyDisp = false
            this.dateDisp = false
        },
        dateFindTap: function (id) {
            this.typeDisp = false
            this.moneyDisp = false
            this.dateDisp = false
        },
        moneyFindTap: function (id) {
            this.typeDisp = false
            this.moneyDisp = false
            this.dateDisp = false
        },
        typeFindTap: function (id) {
            this.typeDisp = false
            this.moneyDisp = false
            this.dateDisp = false
        },
    }
    };
</script>
<style type="text/stylus" lang="stylus" scoped>
    .sign-ui
        .page-box
            position fixed;
            top 2.4rem;
            left 0;
            right 0;
            bottom 0;

        .cube-scroll-list-wrapper
            overflow hidden;
</style>
<style scoped type="text/stylus" lang="stylus">
    .page
        width 100%
        height 100%
        padding-top 2.4rem;
        padding-bottom 1.43rem
        background #FFF

        .header
            position fixed;
            left 0;
            top 0;
            height 45px;
            background rgb(46, 107, 107);
            width 100%;
            z-index 9999;

        .go_left
            position absolute;
            left 0;
            top 0;
            width 40px;
            height 45px;
            background url(./img/icon_goback.png) center no-repeat;
            background-size 10px auto;

        .header_til {
            line-height: 45px;
            font-size: 17px;
            display: block;
            text-align: center;
            color: #fff;
        }

        .money-box
            display flex;
            justify-content space-between;
            margin-top 1.3rem;
            border-bottom 1px #f0f0f0 solid;
            padding-bottom 0.3rem;
            margin-top 45px;
            position fixed;
            top 0;
            width 100%;
            z-index 999;
            background-color #fff;

            .money-item
                width 33%;
                border-right 1px solid #f0f0f0;
                text-align center;
                margin-top 0.3rem;
                display flex;
                justify-items center;
                align-items center;

                .item-img
                    width 20px;
                    height 20px;

                .money-txt
                    color: #999999;
                    font-size: 13px;

                .icon-btselect
                    width 12px;
                    height: 7px;

        .accordion-box
            position fixed;
            top: 2.5rem;
            bottom 0;
            left 0;
            right 0;
            background-color rgba(0, 0, 0, 0.2);

            .center-box
                background-color #fff;
                padding 0.2rem 0 0.5rem 0;
                display flex;
                justify-content start;
                flex-wrap wrap;

                .date-item
                    width 95%;
                    height 1rem;
                    line-height 1rem;
                    border-radius 20px;
                    border 1px #eee solid;
                    text-align center;
                    font-size 13px;
                    color #999;
                    margin 0.2rem auto;

                .type-item
                    width 20%;
                    border: 1px #eee solid;
                    border-radius 4px;
                    margin 0.4rem 2.2% 0 2.2%;
                    text-align center;
                    padding 7px 0;
                    font-size 14px;

            .type-title
                background-color: #fff;
                padding-left: 0.3rem;
                font-size: 15px;
                height: 0.5rem;
                line-height: 1rem;

            .btn-box
                display flex;
                justify-content space-between;
                align-items center;
                width 100%;
                padding-top 1rem;
                background-color #fff;

                .btn-item
                    width 50%;
                    height 1.2rem;
                    text-align center;
                    line-height 1.2rem;
                    font-size 18px;

        .loan-list
            margin-top 0.4rem;
            padding 0 0.3rem;
            display: flex;
            justify-content space-between;

            .loan-info
                max-width 7rem;
                display flex;
                justify-content start;
                align-items start;

                .organ-info
                    margin-left 0.2rem;

                    .organ-name
                        font-size 16px;
                        color #2e2e2e;

                    .organ-service
                        overflow hidden;
                        text-overflow ellipsis;
                        white-space nowrap;
                        width 4rem;
                        color: #666666;
                        line-height 0.6rem;
                        font-size: 13px;

                    .organ-peopleCount
                        font-size 13px;
                        color #666

                        span
                            color red;

            .apply-btn
                font-size 14px;
                color #5461eb;
                border 1px solid #5461eb;
                padding 0 18px;
                border-radius 10px;
                line-height: 20px;
                height: 20px;

        .moneyItem-box
            display flex;
            justify-content space-between;

            .money-item
                width 33%;
                border-right 1px solid #f0f0f0;
                text-align center;
                margin-top 0.3rem;

                .money-txt
                    color: #999999;
                    font-size: 13px;

                .money-conter
                    font-size: 19px;
                    color: #2e2e2e;
                    line-height 0.8rem;
</style>
